<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/10/31
  Time: 16:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>list</title>
    <%--    官网地址--%>
    <%--    <link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet">--%>
    <link href="${pageContext.request.contextPath}/statics/layui/layui/css/layui.css" rel="stylesheet">
</head>
<body>

<div style="margin-top: 25px">
    <div align="center">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">真实姓名：</label>
                    <div class="layui-input-block">
                        <input class="layui-input" name="realName" id="realName" autocomplete="off">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">角色：</label>
                    <div class="layui-input-block">
                        <select name="roleId" lay-filter="aihao">
                            <option value="">全部</option>
                            <option value="1">管理系统员</option>
                            <option value="2">店长</option>
                            <option value="3">店员</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
                    </div>
                </div>

                <div class="layui-inline" style="margin-left: 350px;margin-bottom: 50px">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-primary layui-border-black"
                                onclick="location.href='http://localhost:8080/springmvc_demo_war_exploded/supplier/tolist2'"
                                lay-filter="demo2">供货商
                        </button>
                    </div>
                </div>

            </div>
        </form>
    </div>

    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>

<div style="margin-left: 20px" id="seeView"></div>

<script src="${pageContext.request.contextPath}/statics/layui/layui/layui.js" charset="utf-8"></script>

<script type="text/html" id="sex">
    {{d.sex==1 ? '女': '男'}}
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="view-t">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="see">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="view-y">查看</a>
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
    </div>
</script>

<script type="text/html" id="img">
    <img src="${pageContext.request.contextPath}/statics/upload/{{d.idpicpath}}" alt="" width="30px" height="30px">
</script>

<script>
    layui.use(['table', 'form', 'jquery', 'layer','element'], function () {
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;
        var element = layui.element;

        var tableIns = table.render({
            elem: '#test'
            , url: '${pageContext.request.contextPath}/user/list'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , cols: [[
                {field: 'id', width: 100, title: '编号', sort: false, align: 'center'}
                , {field: 'account', width: 120, title: '账号', align: 'center'}
                , {field: 'realName', width: 120, title: '真实姓名', align: 'center', sort: false}
                , {field: 'roleName', width: 120, title: '角色', align: 'center'}
                , {field: 'sex', title: '性别', templet: "#sex", width: 80, minWidth: 80, align: 'center'}
                , {field: 'age', width: 80, title: '年龄', align: 'center', sort: false}
                , {field: 'phone', width: 130, title: '电话', align: 'center', sort: false}
                , {field: 'address', width: 320, title: '地址', align: 'center', sort: false}
                , {field: 'idpicpath', width: 120, title: '图片',templet: "#img", align: 'center', sort: false}
                , {fixed: 'right', title: '异步', toolbar: '#see', width: 100, align: 'center'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200, align: 'center'}
            ]]
            , page: true
        });

        //监听提交
        form.on('submit(demo1)', function (data) {
            console.log(data.field)
            //这里以搜索为例
            tableIns.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    realName: data.field.realName
                    , roleId: data.field.roleId
                    //…
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });

        //工具栏事件
        table.on('toolbar(test)', function (obj) {
            console.log(obj);
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    window.open('toadd')
                    break;
            }
        });

        //触发单元格工具事件
        table.on('tool(test)', function (obj) { // 双击 toolDouble
            var data = obj.data;
            // console.log(data.id)
            if (obj.event === 'view-t') {
                // window.open('view/'+data.id)
                layer.open({
                    type: 2,
                    area: ['320px', '400px'],
                    content: ['view/' + data.id, 'no'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
            } else if (obj.event === 'view-y'){
                $("#seeView").html("");

                $.get('see/' + data.id, function (data) {
                    console.log(data);
                    // let parse = JSON.parse(data);
                    $.each(data,function(index,value){
                        console.log(index+":"+value)
                        if (index==="sex"){
                            if (value==1) {
                                value="女"
                            }else{
                                value="男"
                            }
                        }
                        if (index==="roleId"||index==="createdUserId"||index==="createdTime"){}else{

                            if (index==="idpicpath"){
                                $("#seeView").append('<img src="${pageContext.request.contextPath}/statics/upload/'+value+'">     ')
                            }else{
                                $("#seeView").append(value+"     ");
                            }
                        }
                    });
                })

            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    // 发送删除请求
                    $.get('delete/' + data.id, function (data) {

                        if (data === '1') {
                            location.reload();
                        } else {
                            layer.msg("删除失败", {
                                icon: 2,
                                time: 1000
                            })
                        }
                    })
                    // 关闭提示
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                // window.open('update/'+data.id)
                layer.open({
                    type: 2,
                    title: '编辑',
                    area: ['450px', '680px'],
                    content: ['update/' + data.id, 'no'], //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    cancel: function(index, layero){
                        tableIns.reload({
                            where: { //设定异步数据接口的额外参数，任意设
                                //…
                            }
                            , page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                        layer.close(index)
                        return false;
                    }
                });
            }
        });
    });
</script>
</body>
</html>
